<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>商品价格预测</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrap.css"/>
    <link rel="stylesheet"
          href="${request.contextPath}/static/assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery.gritter.min.css"/>
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/daterangepicker.min.css">
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/jquery.css">
    <!-- text fonts -->
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/fonts.googleapis.com.css"/>
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/fonts.css">
    <!-- ace styles -->
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/ace.min.css"
          class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="${request.contextPath}/static/stylesheets/daterangepicker.css">
    <link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrap-datepicker3.min.css">
    <script src="${request.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        .page-content {
            padding: 0px 0px 0px !important;
        }

        .ace-icon {
            cursor: pointer;
        }
    </style>
</head>
<body class="skin-2" style="background-color: #FFF;">
<div class="page-content">
    <div class="tabbable">
        <div class="tab-content">
            <div id="manage" class="tab-pane active in">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="widget-box">
                            <div class="widget-body" style="background-color: #EFF3F8;">
                                <div class="widget-main">
                                    <form class="form-inline" id="searchForm" method="post"
                                          action="${request.contextPath}/datashow/predictCommodityList">
                                        <input type="hidden" id="_csrf" name="${_csrf.parameterName}"
                                               value="${_csrf.token}"/>
                                        <div class="form-group" style="width: 100%;">

                                            <label for="exampleInputName">业务代码
                                                <select name="businessCode" id="businessCode"
                                                        aria-controls="dynamic-table" class="form-control input-sm"
                                                        style="width:100px;height:34px">
                                                    <option value="TICKET"
                                                    <#if PredictCommodityListConditionVO.businessCode=="TICKET">
                                                        selected
                                                    </#if>
                                                    >门票</option>
                                                    <option value="HOTEL"
                                                    <#if PredictCommodityListConditionVO.businessCode=="HOTEL">
                                                        selected
                                                    </#if>
                                                    >酒店</option>
                                                </select>
                                            </label>

                                            <label for="exampleInputName">公司名称
                                                <select name="companyCode" id="companyCode"
                                                        aria-controls="dynamic-table" class="form-control input-sm"
                                                        style="width:100px;height:34px">
                                                    <!-- <option value="LMM">驴妈妈</option> -->
                                                    <option value="LMM_C_CODE"
                                                    <#if PredictCommodityListConditionVO.companyCode=="LMM_C_CODE">
                                                        selected
                                                    </#if>
                                                    >驴妈妈</option>
                                                    <option value="XC_C_CODE"
                                                    <#if PredictCommodityListConditionVO.companyCode=="XC_C_CODE">
                                                        selected
                                                    </#if>
                                                    >携程</option>
                                                    <option value="TC_C_CODE"
                                                    <#if PredictCommodityListConditionVO.companyCode=="TC_C_CODE">
                                                        selected
                                                    </#if>
                                                    >同程</option>
                                                    <option value="TN_C_CODE"
                                                    <#if PredictCommodityListConditionVO.companyCode=="TN_C_CODE">
                                                        selected
                                                    </#if>
                                                    >途牛</option>
                                                    <option value="QNR_C_CODE"
                                                    <#if PredictCommodityListConditionVO.companyCode=="QNR_C_CODE">
                                                        selected
                                                    </#if>
                                                    >去哪儿</option>
                                                    <option value="MT_C_CODE"
                                                    <#if PredictCommodityListConditionVO.companyCode=="MT_C_CODE">
                                                        selected
                                                    </#if>
                                                    >美团</option>
                                                </select>
                                            </label>

                                            <label for="exampleInputName" style="margin-left: 30px;">产品名称
                                                <input class="form-control" name="productName" id="productName"
                                                       value="<#if PredictCommodityListConditionVO??&&PredictCommodityListConditionVO.productName??>${PredictCommodityListConditionVO.productName}</#if>"
                                                       placeholder="模糊查询产品名称" type="text" style="width:123px">
                                            </label>
                                            <button type="submit" class="btn btn-pink btn-sm" id="search"
                                                    style="margin-left: 30px;">
                                                <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>查询
                                            </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12">
                        <table id="dynamic-table"
                               class="table table-striped table-bordered table-hover dataTable no-footer"
                               role="grid" aria-describedby="dynamic-table_info">
                            <thead>
                            <tr>
                                <th>产品名称</th>
                                <th>商品名称</th>
                                <th>预测价格</th>
                                <th>预测时间</th>
                                <th>模型得分</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <#if resultList?? && resultList?size&gt;0>
                                <#list  resultList as commodity>
                                    <tr class="">
                                        <td>${commodity.productName!}</td>
                                        <td>${commodity.commodityName!}</td>
                                        <td>${commodity.prePrice!}</td>
                                        <td>${commodity.preDate!?string('yyyy-MM-dd')}</td>
                                        <td>${commodity.modelScore!}</td>
                                        <input type="hidden" class="productId" value="${commodity.productId!}"/>
                                        <input type="hidden" class="commodityId" value="${commodity.commodityId!}"/>
                                        <!--<input type="hidden" id="productId" value="${commodity.productId!}"/>-->
                                        <!--<input type="hidden" id="commodityId" value="${commodity.commodityId!}"/>-->
                                        <!--<td align='center'>-->
                                        <!--<div class="hidden-sm hidden-xs action-buttons" style="cursor:pointer;" data-toggle="modal" data-target="#myModal"-->
                                        <!--id="searchHis">-->
                                        <!--<a class="blue">-->
                                        <!--<i class="ace-icon fa fa-search-plus bigger-130"></i>-->
                                        <!--</a>-->
                                        <!--</div>-->
                                        <!--</td>-->
                                        <td align='center'>
                                            <div class="hidden-sm hidden-xs action-buttons">
                                                <a class="blue" onclick="showPriceCompareList(this);" role='button'>
                                                    <i class="ace-icon fa fa-search-plus bigger-130"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </#list>
                            </#if>
                            </tbody>
                        </table>
                        <#include "/paginator.html">
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <button class="btn btn-info" data-toggle="modal" type="button" style="display:none;" id="update"
                                data-target="#myModal"></button>
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            ×
                                        </button>
                                        选择时段:<label><input type="text" id="config-demo" name="chooseTimeVO"
                                                           class="form-control time"
                                                           style="width:200px;height:32px;"></label>
                                        <button id="app_search" type="button" onclick="replaceDate('3');"
                                                class="btn btn-white btn-sm">
                                            <span class="ace-icon icon-on-right bigger-110"></span>
                                            未来3天
                                        </button>
                                        <button id="app_search" type="button" onclick="replaceDate('7');"
                                                class="btn btn-white btn-sm">
                                            <span class="ace-icon icon-on-right bigger-110"></span>
                                            未来7天
                                        </button>
                                        <button id="ajax_search" type="button" class="btn btn-pink btn-sm">
                                            <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                            Search
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <input type="hidden" id="productId"/>
                                        <input type="hidden" id="commodityId"/>
                                        <div id="main" style="width: 550px;height:400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="predictCommodityListContext" value="${request.contextPath}"/>
<script src="${request.contextPath}/static/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="${request.contextPath}/static/assets/js/bootbox.js"></script>
<!-- ace scripts -->

<script src="${request.contextPath}/static/assets/js/jquery.gritter.min.js"></script>
<script src="${request.contextPath}/static/assets/js/ace-elements.min.js"></script>
<script src="${request.contextPath}/static/assets/js/ace.min.js"></script>
<!-- user scripts -->
<script src="${request.contextPath}/static/assets/js/moment.min.js"></script>
<script src="${request.contextPath}/static/assets/js/daterangepicker.min.js"></script>
<script src="${request.contextPath}/static/assets/js/echarts.min.js"></script>
<script src="${request.contextPath}/static/assets/js/user/base.js"></script>
<script src="${request.contextPath}/static/assets/js/bootstrap-datepicker.min.js"></script>

<script type="text/javascript">
    var predictCommodityListContext = $("#predictCommodityListContext").val();
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '价格对比'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['历史价格', '预测价格']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '历史价格',
                type: 'line',
                stack: '历史价格',
                smooth: true,   //这个就是关键点了，为true是不支持虚线的，实线就用true
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 2,
                            type: 'solid'  //'dotted'虚线 'solid'实线
                        }
                    }
                },
                data: []
            },

            {
                name: '预测价格',
                type: 'line',
                stack: '预测价格',
                smooth: false,   //这个就是关键点了，为true是不支持虚线的，实线就用true
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 2,
                            type: 'dotted'  //'dotted'虚线 'solid'实线
                        }
                    }
                },
                data: []
            }
        ]
    };

    showPriceCompareList = function (obj) {
        $("#update").click();
        productId = $(obj).parents("tr").find(".productId").val();
        commodityId = $(obj).parents("tr").find(".commodityId").val();
        $("#productId").val(productId);
        $("#commodityId").val(commodityId);
        productId = $("#productId").val();
        commodityId = $("#commodityId").val();
        companyCode = $("#companyCode").val();
        businessCode = $("#businessCode").val();
        chooseTime = $("#config-demo").val();
        $.ajax({
            url: '${request.contextPath}/datashow/predictCommodityHisList',
            type: "GET",
            data: {
                productId: productId,
                commodityId: commodityId,
                chooseTime: chooseTime,
                companyCode: companyCode,
                businessCode: businessCode
            },
            success: function (data) {
                if (data.sessionStatus == 540) {//异步请求session过期状态
                    window.location.href = predictCommodityListContext + "/login";
                    return;
                } else {
                    pricePredictList = data.pricePredictList;
                    priceRealList = data.priceRealList;
                    predictPrice = [];
                    realPrice = [];
                    var xAxisDataf = dataScope(chooseTime.split(" - ")[0], chooseTime.split(" - ")[1]);
                    option.xAxis.data = xAxisDataf;
                    var maxReal = 0;
                    var maxPredict = 0;
                    var flag = true;
                    //对X轴进行遍历，将对应的Y轴填充数据
                    for (var i = 0; i < xAxisDataf.length; i++) {
                        //遍历价格表，并将对应时间的价格赋给相应Y轴
                        if (priceRealList != null && priceRealList.length > 0) {
                            for (var j = 0; j < priceRealList.length; j++) {
                                m = priceRealList[j].sale_date.substring(4, 6);
                                d = priceRealList[j].sale_date.substring(6, 8);
                                date = m + "-" + d;
                                if (date == xAxisDataf[i]) {
                                    realPrice[i] = priceRealList[j].sale_price;
                                    maxReal = i;
                                    break;
                                }
                            }
                        }

                        if (pricePredictList != null && pricePredictList.length > 0) {
                            for (var j = 0; j < pricePredictList.length; j++) {
                                m = pricePredictList[j].sale_date.substring(4, 6);
                                d = pricePredictList[j].sale_date.substring(6, 8);
                                date = m + "-" + d;
                                if (date == xAxisDataf[i] && realPrice[i] == null) {
                                    predictPrice[i] = pricePredictList[j].sale_price;
                                    if (flag) {
                                        maxPredict = i - 1;
                                        flag = false;
                                    }
                                    break;
                                }
                            }
                        }
                    }
                    predictPrice[maxPredict] = realPrice[maxReal];
                    option.series[0].data = realPrice;
                    option.series[1].data = predictPrice;
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        });
    };

    $("#ajax_search").click(function () {
        productId = $("#productId").val();
        commodityId = $("#commodityId").val();
        companyCode = $("#companyCode").val();
        businessCode = $("#businessCode").val();
        chooseTime = $("#config-demo").val();
        $.ajax({
            url: '${request.contextPath}/datashow/predictCommodityHisList',
            type: "GET",
            data: {
                productId: productId,
                commodityId: commodityId,
                chooseTime: chooseTime,
                companyCode: companyCode,
                businessCode: businessCode
            },
            success: function (data) {
                if (data.sessionStatus == 540) {//异步请求session过期状态
                    window.location.href = predictCommodityListContext + "/login";
                    return;
                } else {
                    pricePredictList = data.pricePredictList;
                    priceRealList = data.priceRealList;
                    predictPrice = [];
                    realPrice = [];
                    var xAxisDataf = dataScope(chooseTime.split(" - ")[0], chooseTime.split(" - ")[1]);
                    option.xAxis.data = xAxisDataf;
                    var maxReal = 0;
                    var maxPredict = 0;
                    var flag = true;
                    //对X轴进行遍历，将对应的Y轴填充数据
                    for (var i = 0; i < xAxisDataf.length; i++) {
                        //遍历价格表，并将对应时间的价格赋给相应Y轴
                        if (priceRealList != null && priceRealList.length > 0) {
                            for (var j = 0; j < priceRealList.length; j++) {
                                m = priceRealList[j].sale_date.substring(4, 6);
                                d = priceRealList[j].sale_date.substring(6, 8);
                                date = m + "-" + d;
                                if (date == xAxisDataf[i]) {
                                    realPrice[i] = priceRealList[j].sale_price;
                                    maxReal = i;
                                    break;
                                }
                            }
                        }

                        if (pricePredictList != null && pricePredictList.length > 0) {
                            for (var j = 0; j < pricePredictList.length; j++) {
                                m = pricePredictList[j].sale_date.substring(4, 6);
                                d = pricePredictList[j].sale_date.substring(6, 8);
                                date = m + "-" + d;
                                if (date == xAxisDataf[i] && realPrice[i] == null) {
                                    predictPrice[i] = pricePredictList[j].sale_price;
                                    if (flag) {
                                        maxPredict = i - 1;
                                        flag = false;
                                    }
                                    break;
                                }
                            }
                        }
                    }
                    predictPrice[maxPredict] = realPrice[maxReal];
                    option.series[0].data = realPrice;
                    option.series[1].data = predictPrice;
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        });
    });


    function dataScope(value1, value2) {
        var getDate = function (str) {
            var tempDate = new Date();
            var list = str.split("/");
            tempDate.setFullYear(list[2]);
            tempDate.setMonth(list[0] - 1);
            tempDate.setDate(list[1]);
            return tempDate;
        }
        var date1 = getDate(value1);
        var date2 = getDate(value2);
        if (date1 > date2) {
            var tempDate = date1;
            date1 = date2;
            date2 = tempDate;
        }
        date1.setDate(date1.getDate());
        var dateArr = [];
        var i = 0;
        while (!(date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate() + 1)) {
            dateArr[i] = ((date1.getMonth() + 1) < 10 ? ('0' + (date1.getMonth() + 1)) : (date1.getMonth() + 1)) + "-"
                    + (date1.getDate() < 10 ? ('0' + (date1.getDate())) : (date1.getDate()));
            i++;
            date1.setDate(date1.getDate() + 1);
            if (date1 > date2) {
                break;
            }
        }
        return dateArr;
    }

    function replaceDate(obj) {
        if (obj == '3') {
            startDate = new Date(new Date().getTime() - 3 * 1000 * 60 * 60 * 24);
            endDate = new Date(new Date().getTime() + 3 * 1000 * 60 * 60 * 24);
        } else if (obj == '7') {
            startDate = new Date(new Date().getTime() - 7 * 1000 * 60 * 60 * 24);
            endDate = new Date(new Date().getTime() + 7 * 1000 * 60 * 60 * 24);
        }
        var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
        $(".time").val(dateStr);
    }

    function dateFormat(date) {
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = month + "/" + strDate + "/" + date.getFullYear();
        return currentdate;
    }

    $('.time').daterangepicker(
            {
                startDate: new Date(new Date().getTime() - 3 * 1000 * 60 * 60 * 24),
                endDate: new Date(new Date().getTime() + 3 * 1000 * 60 * 60 * 24),
                showDropdowns: true,
                showWeekNumbers: false,
                timePicker: false,
                timePicker12Hour: false,
                ranges: {
                    '明日': [moment().subtract(1, 'days'), moment().subtract(-1, 'days')],
                    '未来7天': [moment().subtract(7, 'days'), moment().subtract(-7, 'days')],
                },
                opens: 'right',
                buttonClasses: ['btn btn-default'],
                applyClass: 'btn-small btn-pink blue',
                cancelClass: 'btn-small',
                format: 'yyyy-MM-dd',
                separator: ' to ',
                locale: {
                    applyLabel: '确定',
                    cancelLabel: '取消',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    daysOfWeek: ['日', '一', '二', '三', '四', '五',
                        '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月',
                        '六月', '七月', '八月', '九月', '十月', '十一月',
                        '十二月'],
                    firstDay: 1
                }
            },
            function (start, end, label) {//格式化日期显示框

                $('.time').html(
                        start.format('yyyy-MM-dd') + ' - '
                        + end.format('yyyy-MM-dd'));
            });

</script>
</body>
</html>